<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/stylesheets/page2.css" media="screen" />
<link rel="stylesheet" href="/stylesheets/common.css" media="screen" />
<link rel="stylesheet" href="/stylesheets/page0.css" media="screen" />
<title></title>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.knob.js"></script>
</head>
<body background="images/Backgournd.png" style="width: 1202px ;height: 634px;">
<iframe class="page2 back_video" width="1202px" height="634px" src="//www.dmxzone.com/demo/FeedGenie/youtube/" frameborder="0" allowfullscreen></iframe>
<div id="loading_view" style="width: 1280px;height: 720px;">
	<div id="logo">
		<img src="/images/page0/image_Logo_tv.png" />
	</div>
	<div id="logo_text">
		<img src="/images/page0/Imgae_logo_Text.png" />
	</div>
	<div id="ball1" class="ball"></div>
	<div id="ball2" class="ball"></div>
	<div id="ball3" class="ball"></div>
</div>		
<div class="page2 p4_bg_image" id="view" style="visibility: hidden;">
<div class="page2 p4_icon_title"></div>
<div class="page2 p4_icon_number"></div>
<form action='/page3' method='post'></form>
<div class="page2" id="img_log">
	<img alt="TV&amp;STRETCHING" src="images/page2/logo.png">
</div>
<div id="be_small"class="page2 p4_btn_minimize  p5_btn_spread">
	<!--<img alt="줄임 버튼" src="images/page3/Btn_Be-small.png">-->
	<img class="page2 p4_btn_minimiz_p p5_btn_spread_p"/>
	<div class="page2 p5_btn_spread_p"></div>
</div>

<div class="page2 p2_btn_back" id="btn_pre">
	 <img alt="이전화면" src="images/page2/icon_back.png" class="p2_btn_back_icon">
</div>

<div  class="page2" id="img_time">
	<img alt="현재시간" src="images/page2/Time_text.png">
</div>

<div  class="page2" id="time_module">
	<input type="text" value='03:00'class="dial">
</div>

<div  class="page2 p2_btn_timer_control" id="btn_stop" alt='stop'>
	<p>STOP</p>
	<!--<img alt="멈추기" src="images/page2/btn_Stop_timer.png">-->
</div>

<div  class="page2" id="text_title">
	<div class="page2" id="top_img"><img alt="멈추기" src="images/page2/Back_Text_1.png"></div>
	<p class="page2" id="middle"></p>
	<div class="page2" id="bottom_img"><img alt="멈추기" src="images/page2/Back_Text_3.png"></div>
</div>

<div  class="page2" id="line1">
	<img src="images/page2/border_Right_line.png">
</div>

<div  class="page2" id="line2">
	<img src="images/page2/border_Right_line.png">
</div>

<div class="page2 " id="img_detaile">
	<div class="page2 p5_bg"></div>
	<div class="page2 p2_line_wide"></div>
	<div class="page2 p4_pose_box p5_pose_box"></div>
	<div class="page2"   id="img_detail_text_img">
		<img alt="상세 이미지" src="">
		<p alt=''></p>
		<div class="page2 text_log"></div>
	</div>
	<div class="page2"  id="img_thumb_nail_1">
		<img alt="섬네일1" src="">
		<div class="page2 number1"></div>
	</div>
	<div class="page2"  id="img_thumb_nail_2">
		<img alt="섬네일2" src="">
		<div class="page2 number2"></div>
	</div>
</div>

<!-- <div class="page2"  id="btn_finish">
	<img alt="앱종료" src="images/page2/AppExit.png">
</div> -->

<div class="page2 p2_btn_pre_next"  id="btn_pre_exer">
	<!-- <img alt="이전 스트레칭" src="images/page2/Btn_Pre_stretching.png"> -->
	<img alt="up" src="">
	<p>이전 스트레칭</p>
</div>

<div  class="page2 p2_btn_pre_next"  id="btn_next_exer">
	<!-- <img alt="다음 스트레칭" src="images/page2/Btn_Next_stretching.png"> -->
	<p>다음 스트레칭</p>
	<img alt="down" src="">
</div>

<div class="page2 p2_btn_go_tv"  id="btn_with_tv">
	<img alt="TV보며하기" src="images/page2/icon_tv.png">
	<div>
	<p id="txt1">TV보면서</p>
	<p id="txt2">스트레칭하기</p>
	</div>
</div>
<input type='hidden' id='loadTest'>

</div>

</body>
<script type="text/javascript">
/* var listSel = <%-JSON.stringify(list)%>;*/
var listSel = <%-JSON.stringify(list)%>;
listSel = listSel.list.split(",");

var commonDb = '';
var imgDetaileText = $('#img_detail_text_img');
var imgTum1 = $('#img_thumb_nail_1');
var imgTum2 = $('#img_thumb_nail_2');
var imgPath = '/images/common/';
var listIdx = 0;
var fullIdx;
var dialTimerText = '03:00';
var min = 3;
var sec = 0;
var dialTimerVal = 0;
fullIdx = listSel.length;

var imgInterval;
var timerInterval;

	$(document).ready(function(){
		//fgColor : 채워주는 색#2A3543
		$('.dial').knob({
				readOnly : true,
				max : 180,
				width : 150,
				skin : "tron",
				thickness : '.2',
				fgColor: "#fc6862",
				inputColor : '#ffffff',
				bgColor : '#293543'
		}).trigger('inter');

		function dialChange(){
			$('.dial').val(dialTimerVal).trigger('change');
			if(dialTimerVal < 300){
				dialTimerVal++;
			}else if(dialTimerVal > 300){
				dialTimerVal = 0;
			}

			if(sec < 10 && sec > 0){
				sec = '0' + sec;
			}else if(sec == 0){
				sec = '00';
			}

			dialTimerText = '0' + min + ':' + sec;
			$('.dial').val(dialTimerText);
		}

		function minTest(){
			if(min > 0 ){
				min--;
			}else if(min < 0){
				min = 60;
			}
		}

		function secTest(){
			dialChange();
			if(sec < 60 && sec > 0){
				sec--;
			}else if(sec <= 0 && min != 0){
				sec = 59;
				minTest();
			}else if(sec <= 0 && min == 0){
				$('#btn_next_exer').trigger('click');
				if(fullIdx-1 == listIdx){
					listIdx = 0;
				}
			}
		}

		$('.dial').on('inter', function(){
			secTest();
		});

		/* dial 초기화 */
		function dialNew(){
			 $('.dial').val('03:00');
			 min = 3;
			 sec = 0;
			 dialTimerVal = 0;
		}
	// start
	/*	var interval = setInterval(countdown, 1000);*/

		$.getJSON("/data/db.json", function(data){
        commonDb = data.db;
  	});

		function getDb(idx){
			var result;
				$.each(commonDb, function(){
					if(this.id == listSel[idx]){
						result = this;
					}
				});
			return result;
		}

		function getType(idObj, type){
			var result;
			if(type == 'img'){
				result = idObj.img;
			}else if(type == 'title'){
				result = idObj.title;
			}else if(type == 'detail_Img'){
				result = idObj.detail_Img;
			}else if(type == 'detail_Text'){
				result = idObj.detail_Text;
			}else if(type == 'id'){
				result = idObj.id;
			}
				return result;
		}

		function startTitle(title){
			if($("#text_title > p").text()!=title){
				console.log($("#text_title").text(),title);
				$('#text_title > p').text(title);
				if($("#text_title").hasClass("page3_m")){
					$("#text_title").fadeIn(15000,function(){
							$("#text_title").fadeOut(5000);
						});
				}
			}
		}

		function startImg(src){
			if(src.length == 2){
				var textP = $('#img_detail_text_img').find('p');
				if((textP.attr('alt') == '')|| (textP.attr('alt') == '2')){
					imgDetaileText.find('img').attr('src', imgPath + src[0]);
				}else if(textP.attr('alt') == '1') {
					imgDetaileText.find('img').attr('src', imgPath + src[1]);
				}
			}else{
				imgDetaileText.find('img').attr('src', imgPath + src[0]);
			}

			imgTum1.find('img').attr('src', imgPath + src[0]);
			imgTum2.find('img').attr('src', imgPath + src[1]);
			imgChk(imgTum2.find('img'));
		}

		function startTxt(txt){
			/*console.log($('#img_detail_text_img > p'));
			$('#img_detail_text_img > p').text(txt[0]);
			*/
			var textP = $('#img_detail_text_img > p');
			if((textP.attr('alt') == '')|| (textP.attr('alt') == '2')){
				textP.text(txt[0]).attr('alt', '1');
			}else if(textP.attr('alt') == '1') {
				textP.text(txt[1]).attr('alt', '2');
			}
		}

		/* 운동목록 이미지 로직 */
		function imgChk(imgSrc){
			$(imgSrc).show();
			$(imgSrc).error(function(){
				$(this).hide();
			});
		}


		/* 	운동 stop 이벤트 */
		$('#btn_stop').on('click', function(){
				var btnStop = $('#btn_stop');

				var temp = btnStop.attr('alt');
				console.log(temp);
				if(temp == 'stop'){
					btnStop.attr('alt', 'start');
					clearInterval(imgInterval);
					clearInterval(timerInterval);
					$('#btn_stop > p').text("START");
				}else{
					btnStop.attr('alt', 'stop');
					imgInterval = setInterval('$("#loadTest").trigger("loading")',3000);
					timerInterval =	setInterval('$(".dial").trigger("inter")', 1000);
					/* $('#btn_stop > img').attr("src","http:/images/page2/btn_Stop_timer.png"); */
					$('#btn_stop > p').text("STOP");
				}
		});

		$('#btn_pre_exer').on('click', function(){
			dialTimerVal = 0;
			if(listIdx > 0){
				listIdx--;
				$('#img_detail_text_img > p').attr('alt', '');
				setList();
				dialNew();
			}
			btnUpDownChange();
		});

		$('#btn_next_exer').on('click', function(){
			dialTimerVal = 0;
				if(listIdx < fullIdx-1){
					listIdx++;
					$('#img_detail_text_img > p').attr('alt', '');
					dialNew();
					setList();
				}
				btnUpDownChange();
		});

		/* up/down 버튼 활성화 이벤트 */
		/*
		* 클래스 변경 요망
		*	이미지 변경 요망
		*/
		function btnUpDownChange(){
			if((fullIdx-1) == listIdx) {
				$('#btn_next_exer').removeClass('p2_btn_pre_next')
					.addClass('p2_btn_pre_next_un')
					.find('img').attr('src', '/images/page2/icon_down_un.png');
			}else{
				$('#btn_next_exer').removeClass('p2_btn_pre_next_un')
					.addClass('p2_btn_pre_next')
					.find('img').attr('src', '/images/page2/icon_down.png');
			}
			if (listIdx == 0) {
				$('#btn_pre_exer').removeClass('p2_btn_pre_next')
					.addClass('p2_btn_pre_next_un')
					.find('img').attr('src', '/images/page2/icon_up_un.png');
			}else{
				$('#btn_pre_exer').removeClass('p2_btn_pre_next_un')
					.addClass('p2_btn_pre_next')
					.find('img').attr('src', '/images/page2/icon_up.png');
			}
		}


		$('#loadTest').on('click', function(){
			setList();
		});

		function setList(){
			var temp = getDb(listIdx);
			var imgList = getType(temp, "detail_Img");
			startImg(imgList);
			var titlelist = getType(temp, "title");
			startTitle(titlelist);
			var detail_Text = getType(temp, "detail_Text");
			startTxt(detail_Text);
		}

		/*  세부 운동 이름 보여주기 */
		function changeTitle(title){
			var nextPage = pageIdx + 1;
				$(title).each(function(index, ele){
					if(index == pageIdx){
						exer1_1.parents('div').find('div').text(this);
					}else if(index == nextPage){
						exer2_1.parents('div').find('div').text(this);
				}
			});
		}
			$('#btn_pre').on('click', function(){
				$("form").attr({'method':'get', 'action':'/page1'});
				$("form").submit();
			});

			/* 운동 타이머 */
			function strTimer() {
				var temp = getDb(listIdx);
				var detail_Text = getType(temp, "detail_Text");

			}
			$("#btn_with_tv").click(function(){
				 if($("#btn_with_tv").hasClass("page2")){
				 	 $('.dial').trigger('configure', {"width":60}).trigger("inter");
					 $(".page2").addClass("page3");
					 $(".page3").removeClass("page2");
					 $("#txt1").text("크게보기");
				  }else{
				 	 $('.dial').trigger('configure', {"width":150}).trigger("inter");
					 $(".page3").addClass("page2");
					 $(".page2").removeClass("page3");
					 $("#txt1").text("TV보면서");
				 }
		  });

		  $("#be_small").click(function(){
				 if($("#btn_with_tv").hasClass("page3_m")){
				 	 $('.dial').trigger('configure', {"width":60}).trigger("inter");
					 $(".page3_m").addClass("page3");
					 $(".page3").removeClass("page3_m");
					 $("#text_title").fadeIn(1000);
				 }else{
				 	$('.dial').trigger('configure', {"width":150}).trigger("inter");
					 $(".page3").addClass("page3_m");
					 $(".page3_m").removeClass("page3");
					 $("#text_title").fadeOut(5000);
				 }
		  });

			$('#loadTest').on('loading',function(){
				setList();
			});
	});

	$(window).load(function(){
		function Timer() {
			setTimeout('$("#loadTest").trigger("click")',10);
			imgInterval = setInterval('$("#loadTest").trigger("loading")',3000);
			timerInterval =	setInterval('$(".dial").trigger("inter")', 1000);
		}

		Timer();
		$('#btn_pre_exer').trigger('click');
		$("#loading_view").css("visibility","hidden");
		$("#loading_view").css("top","0px");
		$("#loading_view").css("height","0px ");
		$("#view").css("visibility","visible");

	});

</script>
</html>